<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>智瞳医疗平台</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#36CFC9',
            warning: '#FF7D00',
            danger: '#F53F3F',
            neutral: {
              100: '#F2F3F5',
              200: '#E5E6EB',
              300: '#C9CDD4',
              400: '#86909C',
              500: '#4E5969',
              600: '#1D2129',
            }
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .tab-active {
        @apply border-b-2 border-primary text-primary;
      }
      .sidebar-item-active {
        @apply bg-primary/5 text-primary;
      }
      .card-hover {
        @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
      }
    }
  </style>
</head>
<body class="min-h-screen bg-blue-50 font-inter">
  <!-- 登录界面 -->
<div id="login-page" class="fixed inset-0 bg-white z-50 flex flex-col items-center justify-center p-6">
    <!-- 中间Logo -->
    <div class="text-center  mb-1">
      <img
 src="" alt="logo" width="150" class="login-logo mx-auto mt-12 ">
    </div>
    
    <div class="flex items-center justify-center h-full">
      <div class="w-96 space-y-6">
        <h1 class="text-4xl font-bold text-primary text-center">智瞳医疗平台</h1>
        <div class="space-y-4">
          <input type="text" placeholder="医生真实姓名" class="w-full h-12 px-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all" />
          <input type="text" placeholder="手机号/职工号" class="w-full h-12 px-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all" />
          <input type="password" placeholder="密码" class="w-full h-12 px-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all" />
          <button id="login-btn" class="w-full h-12 bg-primary hover:bg-primary/90 text-white font-medium rounded-lg transition-all duration-300 flex items-center justify-center">
            立即登录
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- 主界面 -->
  <div id="main-app" class="hidden flex">
    <!-- 顶部导航 -->
    <div class="fixed top-0 w-full bg-white shadow-md z-50">
      <div class="px-6">
       <div class="flex h-16 items-center">
          <div class="flex-1"></div>
          <!-- 右上角Logo -->
          <div class="hidden md:flex">
            <button class="tab-btn tab-active flex items-center px-4" data-tab="diagnosis">
              <i class="fa fa-stethoscope mr-2"></i> 诊断中心
            </button>
            <button class="tab-btn flex items-center px-4" data-tab="community">
              <i class="fa fa-comments mr-2"></i> 视界同萌
            </button>
            <button class="tab-btn flex items-center px-4" data-tab="consultation">
              <i class="fa fa-phone mr-2"></i> 远程问诊
            </button>
            <button class="tab-btn flex items-center px-4" data-tab="workspace">
              <i class="fa fa-dashboard mr-2"></i> 工作台
            </button>
            <button class="tab-btn flex items-center px-4" data-tab="profile">
              <i class="fa fa-user mr-2"></i> 个人中心
            </button>
          </div>
          
          <div class="flex-1 flex justify-end">
            <img src="" alt="智瞳医疗平台" class="h-10">
          </div>
          
          <!-- 移动端菜单按钮 -->
          <div class="md:hidden">
            <button id="mobile-menu-btn" class="text-neutral-600 hover:text-primary">
              <i class="fa fa-bars text-xl"></i>
            </button>
          </div>
        </div>
      </div>
    </div>
<!-- IP形象（关键部分） -->
  <div id="ip-character" class="fixed bottom-8 left-8 z-50"> <!-- 调整层级为50，避免被遮挡 -->
    <img 
      src="" 
      alt="小助手" 
      class="w-24 h-24 rounded-lg shadow-md object-contain" <!-- 固定尺寸，完整显示图片 -->

  </div>
    <!-- 诊断中心 -->
    <div id="diagnosis-tab" class="tab-content hidden">
      <div class="fixed left-0 top-16 h-screen w-64 bg-white shadow-lg p-4 overflow-y-auto">
        <div class="flex-col space-y-2">
          <button class="diagnosis-subtab-btn sidebar-item-active w-full flex justify-start items-center p-2 rounded-lg transition-all" data-subtab="input">
            <i class="fa fa-file-image-o mr-2 h-4 w-4"></i> 输入数据
          </button>
          <button class="diagnosis-subtab-btn w-full flex justify-start items-center p-2 rounded-lg transition-all" data-subtab="projection">
            <i class="fa fa-list-alt mr-2 h-4 w-4"></i> 投影层
          </button>
          <button class="diagnosis-subtab-btn w-full flex justify-start items-center p-2 rounded-lg transition-all" data-subtab="segmentation">
            <i class="fa fa-scissors mr-2 h-4 w-4"></i> 分割图片
          </button>
          <button class="diagnosis-subtab-btn w-full flex justify-start items-center p-2 rounded-lg transition-all" data-subtab="metrics">
            <i class="fa fa-bar-chart mr-2 h-4 w-4"></i> 指标
          </button>
        </div>
      </div>
      <div class="ml-64 mt-16 p-8 flex-1">
        <div id="metrics-subtab" class="diagnosis-subtab-content hidden card-hover bg-white rounded-xl p-6 shadow-sm">
          <table class="w-full border-collapse">
            <thead>
              <tr>
                <th class="text-left py-3 px-4 border-b border-gray-200">检测指标</th>
                <th class="text-left py-3 px-4 border-b border-gray-200">测量值</th>
                <th class="text-left py-3 px-4 border-b border-gray-200">正常范围</th>
                <th class="text-left py-3 px-4 border-b border-gray-200">风险提示</th>
              </tr>
            </thead>
            <tbody>
              <tr class="hover:bg-gray-50 transition-colors">
                <td class="py-3 px-4 border-b border-gray-100">血管密度</td>
                <td class="py-3 px-4 border-b border-gray-100">43.7%</td>
                <td class="py-3 px-4 border-b border-gray-100">48-52%（黄斑区）</td>
                <td class="py-3 px-4 border-b border-gray-100">
                  <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
                   ⚠️ 显著降低
                  </span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <!-- 视界同萌 -->
    <div id="community-tab" class="tab-content hidden">
      <div class="fixed left-0 top-16 h-screen w-64 bg-white shadow-lg p-4 overflow-y-auto">
        <div class="flex-col space-y-2">
          <button class="community-subtab-btn sidebar-item-active w-full flex justify-start items-center p-2 rounded-lg transition-all" data-subtab="new_world">
            <i class="fa fa-comments mr-2 h-4 w-4"></i> 新世界
          </button>
          <button class="community-subtab-btn w-full flex justify-start items-center p-2 rounded-lg transition-all" data-subtab="post">
            <i class="fa fa-file-image-o mr-2 h-4 w-4"></i> 发布
          </button>
          <div class="w-full pl-4">
            <button class="community-subtab-btn w-full flex justify-start items-center p-2 rounded-lg transition-all" data-subtab="messages">
              <i class="fa fa-bell mr-2 h-4 w-4"></i> 消息
            </button>
            <div class="ml-4 space-y-1 mt-1">
              <button class="community-subtab-btn w-full flex justify-start items-center p-2 rounded-lg transition-all text-sm" data-subtab="notifications">
                通知
              </button>
              <button class="community-subtab-btn w-full flex justify-start items-center p-2 rounded-lg transition-all text-sm" data-subtab="inbox">
                私信
              </button>
            </div>
          </div>
          <div class="w-full pl-4">
            <button class="community-subtab-btn w-full flex justify-start items-center p-2 rounded-lg transition-all" data-subtab="my">
              <i class="fa fa-user mr-2 h-4 w-4"></i> 我的
            </button>
            <div class="ml-4 space-y-1 mt-1">
              <button class="community-subtab-btn w-full flex justify-start items-center p-2 rounded-lg transition-all text-sm" data-subtab="my_posts">
                我的贴子
              </button>
              <button class="community-subtab-btn w-full flex justify-start items-center p-2 rounded-lg transition-all text-sm" data-subtab="bookmarked">
                我蹲的贴子
              </button>
              <button class="community-subtab-btn w-full flex justify-start items-center p-2 rounded-lg transition-all text-sm" data-subtab="friends">
                我的好友
              </button>
              <button class="community-subtab-btn w-full flex justify-start items-center p-2 rounded-lg transition-all text-sm" data-subtab="following">
                我的关注
              </button>
            </div>
          </div>
        </div>
      </div>
      <div class="ml-64 mt-16 p-8 flex-1">
        <div id="new_world-subtab" class="community-subtab-content card-hover bg-white rounded-xl p-6 shadow-sm">
          <div class="flex items-center justify-between mb-6">
            <h2 class="text-2xl font-bold">最新动态</h2>
            <button class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors flex items-center" onclick="switchCommunitySubtab('post')">
              <i class="fa fa-file-image-o mr-2 h-4 w-4"></i> 发布新帖
            </button>
          </div>
          <div class="space-y-4">
            <div class="card-hover bg-white rounded-lg p-4 shadow-sm border border-gray-100">
              <div class="flex items-start gap-4">
                <div class="flex-1">
                  <h3 class="font-medium text-lg">糖尿病视网膜病变案例</h3>
                  <p class="text-gray-500 mt-2">患者男性，58岁，糖尿病病史10年，近期出现视力模糊...</p>
                  <div class="flex items-center gap-4 mt-4 text-sm text-gray-500">
                    <span>👤 张医生</span>
                    <span>⏳ 2小时前</span>
                    <span>❤️ 15 赞</span>
                    <span>💬 8 评论</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="card-hover bg-white rounded-lg p-4 shadow-sm border border-gray-100">
              <div class="flex items-start gap-4">
                <div class="flex-1">
                  <h3 class="font-medium text-lg">青光眼术后护理经验</h3>
                  <p class="text-gray-500 mt-2">分享术后护理注意事项和常见问题处理...</p>
                  <div class="flex items-center gap-4 mt-4 text-sm text-gray-500">
                    <span>👤 李护士</span>
                    <span>⏳ 5小时前</span>
                    <span>❤️ 23 赞</span>
                    <span>💬 12 评论</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div id="post-subtab" class="community-subtab-content hidden card-hover bg-white rounded-xl p-6 shadow-sm">
          <input type="text" placeholder="输入帖子标题" class="w-full h-12 px-4 border border-gray-300 rounded-lg mb-4 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all" />
          <input type="text" placeholder="添加话题标签（例如 #眼科 #糖尿病）" class="w-full h-12 px-4 border border-gray-300 rounded-lg mb-4 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all" />
          <textarea className="w-full h-48 p-3 border rounded-lg mb-4 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all" placeholder="分享你的医疗见解或病例..."></textarea>
          <button class="w-full bg-primary hover:bg-primary/90 text-white font-medium rounded-lg transition-all duration-300 py-3 flex items-center justify-center">
            <i class="fa fa-file-image-o mr-2"></i> 立即发布
          </button>
        </div>
        <div id="my_posts-subtab" class="community-subtab-content hidden card-hover bg-white rounded-xl p-6 shadow-sm">
          <div class="text-gray-500 text-center py-8">您还没有发布过帖子</div>
        </div>
      </div>
    </div>

    <!-- 远程问诊 -->
    <div id="consultation-tab" class="tab-content hidden ml-0 mt-16 p-8 flex-1">
      <div class="card-hover bg-white rounded-xl p-6 shadow-sm">
        <h2 class="text-2xl font-bold mb-6">今日预约 (2)</h2>
        <div class="space-y-4">
          <div class="card-hover bg-white rounded-lg p-4 shadow-sm border border-gray-100">
            <div class="flex justify-between items-center">
              <div>
                <h3 class="font-medium text-lg">王大明</h3>
                <p class="text-gray-500">138-1234-5678</p>
                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 mt-2">
                  09:00
                </span>
              </div>
              <div class="flex gap-2">
                <button class="p-2 rounded-full hover:bg-blue-100 transition-colors">
                  <i class="fa fa-comment text-primary"></i>
                </button>
                <button class="p-2 rounded-full hover:bg-purple-100 transition-colors">
                  <i class="fa fa-video-camera text-purple-600"></i>
                </button>
              </div>
            </div>
          </div>
          <div class="card-hover bg-white rounded-lg p-4 shadow-sm border border-gray-100">
            <div class="flex justify-between items-center">
              <div>
                <h3 class="font-medium text-lg">陈小红</h3>
                <p class="text-gray-500">159-2345-6789</p>
                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 mt-2">
                  10:30
                </span>
              </div>
              <div class="flex gap-2">
                <button class="p-2 rounded-full hover:bg-blue-100 transition-colors">
                  <i class="fa fa-comment text-primary"></i>
                </button>
                <button class="p-2 rounded-full hover:bg-purple-100 transition-colors">
                  <i class="fa fa-video-camera text-purple-600"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 工作台 -->
    <div id="workspace-tab" class="tab-content hidden ml-0 mt-16 p-8 flex-1">
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
        <div class="card-hover bg-blue-100 rounded-xl p-6">
          <h3 class="text-lg font-medium">今日问诊</h3>
          <div class="text-3xl font-bold mt-2">8</div>
        </div>
        <div class="card-hover bg-green-100 rounded-xl p-6">
          <h3 class="text-lg font-medium">待处理病例</h3>
          <div class="text-3xl font-bold mt-2">23</div>
        </div>
        <div class="card-hover bg-red-100 rounded-xl p-6">
          <h3 class="text-lg font-medium">紧急通知</h3>
          <div class="text-3xl font-bold mt-2">2</div>
        </div>
      </div>
      <div class="card-hover bg-white rounded-xl p-6 shadow-sm">
        <h2 class="text-xl font-bold mb-4">近期工作安排</h2>
        <div class="space-y-3">
          <div class="card-hover flex items-center justify-between p-3 hover:bg-gray-50 rounded">
            <span>病例研讨会</span>
            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
              明天 14:00
            </span>
          </div>
          <div class="card-hover flex items-center justify-between p-3 hover:bg-gray-50 rounded">
            <span>患者随访</span>
            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
              后天 10:30
            </span>
          </div>
        </div>
      </div>
    </div>

    <!-- 个人中心 -->
    <div id="profile-tab" class="tab-content hidden ml-0 mt-16 p-8 flex-1">
      <div class="card-hover bg-white rounded-xl p-6 shadow-sm max-w-2xl">
        <div class="flex items-center gap-6 mb-8">
          <div class="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center text-primary text-2xl font-bold">
            医
          </div>
          <div>
            <h2 class="text-2xl font-bold">李医生</h2>
            <p class="text-gray-500">心血管科主任医师</p>
          </div>
        </div>
        
        <div class="space-y-4">
          <div>
            <label class="block text-sm font-medium mb-1">联系方式</label>
            <input type="text" value="138-1234-5678" class="w-full h-12 px-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all" />
          </div>
          <div>
            <label class="block text-sm font-medium mb-1">电子邮箱</label>
            <input type="text" value="doctor.li@hospital.com" class="w-full h-12 px-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all" />
          </div>
          <button class="w-full mt-6 bg-white hover:bg-gray-50 text-primary font-medium rounded-lg transition-all duration-300 py-3 flex items-center justify-center border border-primary/30">
            <i class="fa fa-cog mr-2"></i>
            更新个人信息
          </button>
        </div>
      </div>
    </div>
  </div>

  <script>
    // 登录功能
    document.getElementById('login-btn').addEventListener('click', function() {
      document.getElementById('login-page').classList.add('hidden');
      document.getElementById('main-app').classList.remove('hidden');
    });

    // 标签页切换功能
    const tabBtns = document.querySelectorAll('.tab-btn');
    tabBtns.forEach(btn => {
      btn.addEventListener('click', function() {
        // 移除所有标签的活动状态
        tabBtns.forEach(b => b.classList.remove('tab-active'));
        // 添加当前标签的活动状态
        this.classList.add('tab-active');
        
        // 隐藏所有内容
        const tabContents = document.querySelectorAll('.tab-content');
        tabContents.forEach(content => content.classList.add('hidden'));
        
        // 显示当前内容
        const tabId = this.getAttribute('data-tab');
        document.getElementById(tabId + '-tab').classList.remove('hidden');
      });
    });

    // 诊断中心子标签页切换
    const diagnosisSubtabBtns = document.querySelectorAll('.diagnosis-subtab-btn');
    diagnosisSubtabBtns.forEach(btn => {
      btn.addEventListener('click', function() {
        // 移除所有子标签的活动状态
        diagnosisSubtabBtns.forEach(b => b.classList.remove('sidebar-item-active'));
        // 添加当前子标签的活动状态
        this.classList.add('sidebar-item-active');
        
        // 隐藏所有子内容
        const subtabContents = document.querySelectorAll('.diagnosis-subtab-content');
        subtabContents.forEach(content => content.classList.add('hidden'));
        
        // 显示当前子内容
        const subtabId = this.getAttribute('data-subtab');
        document.getElementById(subtabId + '-subtab').classList.remove('hidden');
      });
    });

    // 视界同萌子标签页切换
    function switchCommunitySubtab(subtabId) {
      // 移除所有子标签的活动状态
      const communitySubtabBtns = document.querySelectorAll('.community-subtab-btn');
      communitySubtabBtns.forEach(btn => btn.classList.remove('sidebar-item-active'));
      
      // 添加当前子标签的活动状态
      const activeBtn = document.querySelector(`.community-subtab-btn[data-subtab="${subtabId}"]`);
      if (activeBtn) activeBtn.classList.add('sidebar-item-active');
      
      // 隐藏所有子内容
      const subtabContents = document.querySelectorAll('.community-subtab-content');
      subtabContents.forEach(content => content.classList.add('hidden'));
      
      // 显示当前子内容
      document.getElementById(subtabId + '-subtab').classList.remove('hidden');
    }

    // 为视界同萌子标签页按钮添加点击事件
    const communitySubtabBtns = document.querySelectorAll('.community-subtab-btn');
    communitySubtabBtns.forEach(btn => {
      btn.addEventListener('click', function() {
        switchCommunitySubtab(this.getAttribute('data-subtab'));
      });
    });

    // 初始化显示第一个子标签页内容
    document.getElementById('input-subtab').classList.remove('hidden');
    document.getElementById('new_world-subtab').classList.remove('hidden');
    
    // 移动端菜单切换
    document.getElementById('mobile-menu-btn').addEventListener('click', function() {
      const tabsContainer = document.querySelector('.fixed.top-0.w-full.bg-white.shadow-md.z-50 .flex.h-16');
      tabsContainer.classList.toggle('hidden');
      tabsContainer.classList.toggle('flex');
    });
  </script>
</body>
</html>